
<meta charset="utf-8">
<style>
    
    .btns{
        position:fixed;
        bottom: 20px;
        left:36%;
    }
    .pic{
        width:1000px;
        height:500px;
        margin:10px auto;
        text-align: center;
    }
    #img{
        transition: all .3s;
    }
</style>

<div class="pic">
    <img src = "tou01.jpg" width="100" id="img"/>
</div>

<div class="btns">
    <input type="button" value="放大" id="d1"/>
    <input type="button" value="缩小" id="d2"/>
    <input type="button" value="上一张" id="d3"/>
    <input type="button" value="下一张" id="d4"/>
    <input type="button" value="顺时针旋转" id="d5"/>
    <input type="button" value="逆时针旋转" id="d6"/>
</div>

<script>
    d1.onclick = function(){
        img.width = img.width*1.1;
    }
    d2.onclick = function(){
        img.width = img.width*0.9;
    }

    var deg = 0;
    d5.onclick = function(){
        deg = deg+90;
        img.style.transform = "rotate("+deg+"deg)";
    }
    d6.onclick = function(){
        deg = deg-90;
        img.style.transform = "rotate("+deg+"deg)";
    }

   var i = 1;
    d4.onclick = function(){
        if(i==4){
            i=0;
        }
        i++;
        img.src = "tou0"+i+".jpg";
        
    }
    d3.onclick = function(){
        if(i==1){
            i=5;
        }
        i--;
        img.src = "tou0"+i+".jpg";             
    }
</script>